import React from "react";
import "./style.less";

export default class SearchInput extends React.Component{
    constructor(){
        super();
        this.state = {
            searchKeyWord: ''
           
        }
    }

    getKeyWordHandel(event){
        this.setState({
            searchKeyWord: event.target.value
        })
    }
    jumpSearchPage(event){
        if(event.keyCode === 13){
            var sendMsg = this.props.searchKeyWordFun;
            sendMsg(this.state.searchKeyWord);
        }
    }
    componentDidUpdate (prevProps,prevState) {
        let keyWords = this.props.keyWords
        if(keyWords === prevProps.keyWords){
            return;
        }
        this.setState({
            searchKeyWord: keyWords
        })
    }

    render (){
        return (
            <div className="search-container">
                <input 
                    type="text" 
                    placeholder={this.props.inputContent}
                    onChange={this.getKeyWordHandel.bind(this)}
                    onKeyUp={this.jumpSearchPage.bind(this)}
                    value={this.state.searchKeyWord}
                    autoFocus
                    />
                <i className="iconfont icon-sousuo1"></i>
            </div>
        )
    }
}

